// data/photos.ts

export interface Marker {
  id: string;
  position?: { yaw: string | number; pitch: string | number };
  image?: string; // 标记图片 URL (可选)
  svg?: string; // SVG 内容 (可选)
  html?: string; // HTML 内容 (可选)
  width?: number; // 标记宽度
  height?: number; // 标记高度
  tooltip?: string | { // 工具提示
    content: string;
    className?: string;
    position?: string;
    trigger?: 'click' | 'hover';
  };
  anchor?: string; // 锚点位置，例如 'bottom center'
  data?: { [key: string]: any }; // 自定义数据
  polylinePixels?: [number, number][]; // 折线标记的像素点
  svgStyle?: { [key: string]: string }; // SVG 样式
  size?: { width: number; height: number; }; // 标记尺寸
  className?: string; // CSS 类名
  draggable?: boolean; // 是否可拖动
}

export interface PhotoItem {
  id: string;
  panorama: string;
  thumbnail: string;
  name?: string;
  options?: { caption?: string };
  markers: Marker[];
  initialView?: {
    yaw?: string | number;
    pitch?: string | number;
    zoom?: number;
    fisheye?: number;
  };
  animation?: {
    duration?: number;
    easing?: string;
  };
}

/** Marker data **/
export const markers: Marker[] = [
  {
    id: 'new-marker1',
    position: {
      yaw: '-27deg',
      pitch: '-6deg',
    },
    image: '/images/arrow.png',
    size: {
      width: 50,
      height: 50,
    },
    tooltip: {
      content: '全景图一：向前走',
      className: 'custom-tooltip',
      position: 'top',
      trigger: 'click',
    },
    draggable: true,
  },
  {
    id: 'new-marker2',
    position: {
      yaw: '-170deg',
      pitch: '20deg',
    },
    image: '/images/arrow.png',
    size: {
      width: 50,
      height: 50,
    },
    tooltip: '全景图一：另一个标记',
    draggable: true,
  },
  {
    id: 'new-marker3',
    tooltip: {
      content: '恭喜，你找到了宝藏！',
      className: 'custom-tooltip',
      position: 'top',
      trigger: 'click',
    },
    position: {
      yaw: '4deg',
      pitch: '-52deg',
    },
    image: '/images/local.png',
    size: {
      width: 38,
      height: 38,
    },
    anchor: 'bottom center',
    draggable: true,
  },
  {
    id: 'polyline',
    polylinePixels: [
      [2478, 1635],
      [2184, 1747],
      [1674, 1953],
      [1166, 1852],
      [709, 1669],
      [301, 1519],
      [94, 1399],
      [34, 1356],
    ],
    svgStyle: {
      stroke: 'rgba(140, 190, 10, 0.8)',
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeWidth: '10px',
    },
    tooltip: '一个动态折线标记',
    draggable: false, // 折线通常不拖动
  },
  {
    id: 'html-marker-info',
    position: {
      yaw: '90deg',
      pitch: '0deg',
    },
    html: `
      <div class="custom-html-marker">
        <h3>全景图一信息</h3>
        <p>这是场景一的详细描述，可以包含**图文内容**。例如：<br>
           <img src="/images/info-icon.png" alt="信息图标" style="width: 30px; height: 30px; vertical-align: middle; margin-right: 5px;">
           点击这里可以了解更多。</p>
      </div>
    `,
    width: 250,
    height: 120,
    anchor: 'bottom center',
    tooltip: '图文信息点',
    className: 'html-marker-class',
    draggable: true,
  },
  {
    id: 'video-marker-play',
    position: {
      yaw: '-45deg',
      pitch: '-15deg',
    },
    image: '/images/video-play.png',
    size: {
      width: 60,
      height: 60,
    },
    tooltip: '点击观看演示视频',
    data: {
      type: 'video',
      videoUrl: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
      videoTitle: '全景演示视频',
    },
    draggable: true,
  },
];

/** Panorama list **/
export const photos: PhotoItem[] = [
  {
    id: 'sphere-1',
    panorama: '/images/3.jpg',
    thumbnail: '/images/3.jpg',
    options: {
      caption: '全景图一',
    },
    markers: markers, // 使用共享标记作为第一个场景的默认标记
    initialView: {
      yaw: '45deg',
      pitch: '10deg',
      zoom: 70,
    },
    animation: {
      duration: 3000,
      easing: 'easeOutQuart',
    },
  },
  {
    id: 'sphere-2',
    panorama: '/images/2.jpg',
    thumbnail: '/images/2.jpg',
    name: '测试球体',
    options: {
      caption: '全景图二',
    },
    markers: [
      {
        id: 'new-marker21',
        position: {
          yaw: '-27deg',
          pitch: '-6deg',
        },
        image: '/images/arrow.png',
        size: {
          width: 50,
          height: 50,
        },
        tooltip: {
          content: '全景图二：前往全景图一',
          className: 'custom-tooltip',
          position: 'top',
          trigger: 'click',
        },
        draggable: true,
      },
      {
        id: 'html-marker-scene2',
        position: {
          yaw: '20deg',
          pitch: '10deg',
        },
        html: `
          <div style="background: rgba(255, 255, 255, 0.8); padding: 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
            <h4>场景二特色</h4>
            <p style="font-size: 14px; color: #333;">这个场景有一些**独特之处**，请仔细观察。</p>
            <img src="/images/local.png" style="width: 40px; height: 40px; margin-top: 5px;">
          </div>
        `,
        width: 220,
        height: 100,
        tooltip: '场景二的HTML标记',
        className: 'html-marker-class',
        draggable: true,
      },
    ],
    initialView: {
      yaw: '-90deg',
      pitch: '0deg',
      zoom: 60,
    },
  },
  {
    id: 'sphere-3',
    panorama: '/images/1.jpg',
    thumbnail: '/images/1.jpg',
    name: '比斯坎角',
    options: {
      caption: '全景图三',
    },
    markers: [
      {
        id: 'new-marker31',
        position: {
          yaw: '10deg',
          pitch: '5deg',
        },
        image: '/images/arrow.png',
        size: {
          width: 50,
          height: 50,
        },
        tooltip: '全景图三：前往全景图二',
        draggable: true,
      },
      {
        id: 'html-marker-info',
        position: {
          yaw: '90deg',
          pitch: '0deg',
        },
        html: `
      <div class="custom-html-marker">
        <h3>全景图一信息</h3>
        <video   style="width: 100%; height: 100%;" autoplay muted loop>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          您的浏览器不支持视频标签。
        </video>
      </div>
    `,
        width: 250,
        height: 120,
        anchor: 'bottom center',
        tooltip: '图文信息点',
        className: 'html-marker-class',
        draggable: true,
      },
      {
        id: 'video-marker-scene3',
        position: {
          yaw: '70deg',
          pitch: '0deg',
        },
        image: '/images/video-play.png',
        size: {
          width: 60,
          height: 60,
        },
        tooltip: '点击观看场景三视频',
        data: {
          type: 'video',
          videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
          videoTitle: '场景三视频',
        },
        draggable: true,
      },
    ],
    initialView: {
      yaw: '180deg',
      pitch: '-5deg',
      zoom: 40,
    },
  },
];